<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				/* 去除前导符 */
				list-style: none;
				position: fixed;
				width: 10%;
				height: 100%;
				background-color: #cdffff;
			}
			ul a {
				text-decoration: none;
				color: #000;
				text-align: center;
				display: block;
				padding: 5px 10px;
			}
			ul a:hover {
				color: #fff;
				background-color: #000;
			}
			.neirong {
				/* position: absolute;
				left: 10%; */
				margin-left: 10%;
				padding: 0 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
		<div class="neirong">
			<h2>标题</h2>
			<hr />
			<div>
				<p>段落段落段落段落段落段落段落段落段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
			</div>
		</div>
	</body>
</html>